<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">

		<title>12html그룹과시맨틱</title>

	</head>
	<body>
		<h1 >block element</h1>
		<p style="border: 1px solid red; height: 300px">
			블럭단위 요소
		</p>
		<h3 style="border: 1px solid skyblue">블럭단위요소</h3>
		<ul style="border: 1px solid lightblue">
			<li >
				블럭단위요소
			</li>
			<li >
				블럭단위요소
			</li>
			<li >
				블럭단위요소
			</li>
		</ul>

		<hr />
		<h1>Inline elemnets</h1>
		부상에서 돌아온<b style="border: 1px solid red; height: 300px"> 박지성</b>(32·PSV 에인트호벤)이 선발 출전 후 팀 대승에 기여하며 팬 선정 경기 최우수선수(MVP)로 선정됐다.

		<em style="border: 1px solid green">에인트호벤은</em> 16일(한국시각) 네덜란드 위트레흐트의 스타디온 갈겐바르트에서 열린 2013-14 네덜란드 에레디비지에 17라운드 원정 경기에서 위트레흐트를 5-1로 물리쳤다.

		이날 <strong style="border: 1px solid purple">박지성은</strong> 발목 부상에서 돌아온 뒤 처음으로 선발 출전해 79분을 소화하며 팀 승리에 일조했다.

		이에 골닷컴 네덜란드 에디션은 경기 후 박지성에게 평점 3.5점을 부여하며 보통 이상의 평가를 내렸다. 또한 팬들은 박지성을 경기 MVP로 선정하며 성공적인 선발 복귀전을 축하했다.

		<!-- 블럭vs인라인 요소  -->
		<!--
		block level element
		항상 새로운 줄에서 시작되는 요소 자동으로 잘바꿈이 되고 상하 여백이 포함
		가로크기는 부모 요소의 너비에 따라 조정
		width, height 속성으로 임의크기 지정가능
		div,p,ul,li,h1-h6,form,table, hr, fieldset

		inline level element
		주변 요소와 같은 줄에 나란히 나타나는 요소
		가로크기는 요소의 내용에 따라 조정
		width, height 속성으로 크기 변경 불가
		span, a, img, string, em, b ,label, input, select, textarea

		-->
		<hr />
		<h1>요소 그룹화</h1>
		<div>
			<h1 >요소 그룹화 </h1>
			<p style="border: 1px solid red; height: 300px">
				블럭단위 요소
			</p>
			<h3 style="border: 1px solid skyblue">블럭단위요소</h3>
			<ul style="border: 1px solid lightblue">
				<li >
					블럭단위요소
				</li>
				<li >
					블럭단위요소
				</li>
				<li >
					블럭단위요소
				</li>
			</ul>
		</div>

		<span> 부상에서 돌아온<b style="border: 1px solid red; height: 300px"> 박지성</b>(32·PSV 에인트호벤)이 선발 출전 후 팀 대승에 기여하며 팬 선정 경기 최우수선수(MVP)로 선정됐다. <em style="border: 1px solid green">에인트호벤은</em> 16일(한국시각) 네덜란드 위트레흐트의 스타디온 갈겐바르트에서 열린 2013-14 네덜란드 에레디비지에 17라운드 원정 경기에서 위트레흐트를 5-1로 물리쳤다.

			이날 <strong style="border: 1px solid purple">박지성은</strong> 발목 부상에서 돌아온 뒤 처음으로 선발 출전해 79분을 소화하며 팀 승리에 일조했다.

			이에 골닷컴 네덜란드 에디션은 경기 후 박지성에게 평점 3.5점을 부여하며 보통 이상의 평가를 내렸다. 또한 팬들은 박지성을 경기 MVP로 선정하며 성공적인 선발 복귀전을 축하했다. </span>

		<!-- div vs span  -->
		<!--
		div : 블럭 요소 그룹화 태그
		요소들을 하나의 블록요소로 그룹화할 수 있음
		그룹화 대상은 블럭요소와 인라인요소모두 가능
		단, p태그는 다른 블럭요소를 포함x

		span : 인라인요소 그룹화 태그
		요소들을 하나의 인라인 요소로 그룹화 할 수 있음
		텍스트들을 서로 구분하고 싶거나 인라인 요소만을 하나로 묶기위해 사용

		참고 : CSS의 display 속성을 이용하면 inline 요소를 block요소 처럼
		block요소를 inline요소처럼 나타낼 수 있음.

		-->

		<hr />
		<h1>웹페이지 레잉아웃(0) - 테이블 태그 이용 이용</h1>
		<table width="950" border="1" cellspacing="1" cellpadding="0">
			<tr>
				<td height="100">
				<table width="950" border="1" cellspacing="1" cellpadding="0">
					<tr>
						<td height="115">
						<table width="100%" border="1" cellspacing="0" cellpadding="0">
							<tr>
								<td width="15%" height="85" align="center">로고</td>
								<td align="center">배너, 광고,</td>
							</tr>
							<tr>
								<td height="30" colspan="2" align="center">네비게이션 메뉴</td>
							</tr>
						</table></td>
					</tr>
					<tr>
						<td height="550">
						<table width="100%" border="1" cellspacing="0" cellpadding="0">
							<tr>
								<td width="15%" height="550" align="center" valign="middle">메뉴바</td>
								<td align="center" bgcolor="#D6D6D6">본문</td>
							</tr>
						</table></td>
					</tr>
					<tr>
						<td height="100">
						<table width="100%" border="1" cellspacing="0" cellpadding="0">
							<tr>
								<td height="22" colspan="2" align="center">네비게이션 메뉴</td>
							</tr>
							<tr>
								<td width="15%" height="70" align="center">로고</td>
								<td align="center">저작권,연락처</td>
							</tr>
						</table></td>
					</tr>
				</table></td>
			</tr>
		</table>

		<hr />
		<h1>웹페이지 레잉아웃(1) - 그룹화 태그 이용 이용</h1>
		<div id="header"> <!-- 머릿글영역-->
			<div id="logo" style="width: 145px; height: 85px; border: 1px solid blue;float:left">로고</div> <!-- 로고-->
			<div id="ad" style="width: 805px; height: 85px; border: 1px solid lightblue; float:left">배너 광고</div> <!-- 배너/광고-->
			<div id="nav" style="width: 952px; height: 30px; border: 1px solid red; clear:both">네비게이션 </div> <!-- 네비게이션메뉴-->
			
			 </div>
		
		<div id="contents"><!-- 본문글영역-->
		
		<div id="sidebar" style="width: 145px; height: 550px; border: 1px solid aqua; float:left">메뉴 </div> <!-- 메뉴영역-->
		<div id="main" style="width: 805px; height: 550px; border: 1px solid red; float:left">본문 </div> <!--본문영역-->
		 </div>
		<div id="footer" style="clear:both">
		<div id="fnav" style="width: 952px; height: 30px; border: 1px solid red;">네비게이션 </div> <!-- 네비게이션메뉴-->
			
		<div id="flogo" style="width: 145px; height: 70px; border: 1px solid gold;float:left">로고</div> <!-- 로고-->
			<div id="fad" style="width: 805px; height: 70px; border: 1px solid silver;float:left">배너 광고</div> <!-- 배너/광고-->
			
			 </div>
		<!-- 꼬릿글영역-->
		<hr /style="clear:both">
		<h1 >웹페이지 레잉아웃(2) - 시맨틱 태그 이용 이용</h1>
	<header> <!-- 머릿글영역-->
			<div id="logo1" style="width: 145px; height: 85px; border: 1px solid blue;float:left">로고</div> <!-- 로고-->
			<div id="ad1" style="width: 805px; height: 85px; border: 1px solid lightblue; float:left">배너 광고</div> <!-- 배너/광고-->
			<nav style="width: 952px; height: 30px; border: 1px solid red; clear:both">네비게이션 </nav> <!-- 네비게이션메뉴-->
			
			 </header>
		
		<section><!-- 본문글영역-->
		
		<aside style="width: 145px; height: 550px; border: 1px solid aqua; float:left">메뉴 </aside> <!-- 메뉴영역-->
		<article>
		<div id="main1" style="width: 805px; height: 550px; border: 1px solid red; float:left">본문 </div> <!--본문영역-->
		</article>
		</section>
		
		
		<footer style="clear:both">
		<nav style="width: 952px; height: 30px; border: 1px solid red;">네비게이션 </nav> <!-- 네비게이션메뉴-->
			
		<div id="flogo1" style="width: 145px; height: 70px; border: 1px solid gold;float:left">로고</div> <!-- 로고-->
			<div id="fad1" style="width: 805px; height: 70px; border: 1px solid silver;float:left">배너 광고</div> <!-- 배너/광고-->
			
			 </footer>
		
	
	</body>
</html>
